<template>
	<!--画布-->
	<canvas v-if="isReady" class='myCanvas' :canvas-id='canvasId' :style="'width:'+width+'px;height:'+height+'px;'">
	</canvas>
	<!--画布-->
</template>

<script>
	import CanvasPosterSprite from './uni-canvas-poster-sprite.js'
	// import CanvasPosterSprite from 'canvas-poster-sprite/dist/uni-canvas-poster-sprite.js'
	export default {
		name: 'xlcanvas',
		props: {
			//合成海报参数为参数param
			param: {
				type: Object,
				default: function() {
					return {
						width: 900, //画布宽度
						height: 1280, //画布高度
						pics: [], //图片资源
						paths: {}, //路径
						texts: [], //文本
						fileType: "jpg", //保存文件类型
						quality: 1, //保存文件质量
					}
				}
			}
		},
		data() {
			return {
				isReady: false,
				canvasId: 'myCanvasId',
				width: 900, //海报宽度
				height: 1280, //海报高度
			}
		},
		components: {},
		watch: {},
		methods: {
			//fix: Property or method "toJSON" is not defined
			//https://ask.dcloud.net.cn/question/73642
			toJSON() {},
		},
		mounted() {
			var self = this;
			var id = Math.random().toString(16).substr(2);
			var canvasId = 'myCanvasId_' + id;
			var param = self.param;
			self.canvasId = canvasId;
			self.width = param.width;
			self.height = param.height;
			self.isReady = true;

			let pixelRatio = 3;
			let isAndroid = true;
			if (isAndroid) {
				//android设备，分辨率减低一半，以换取合成速率
				//测试结果：分辨率：3     合成时间：15s多
				//        分辨率：1.5   合成时间：4.5s多
				//        分辨率：1     合成时间：2.5s多
				pixelRatio *= 0.5;
			}
			setTimeout(() => {
				//生成海报
				new CanvasPosterSprite({
					self: self,
					// appPlus : true,
					pixelRatio: pixelRatio,
					canvasId: canvasId, //画布宽度id
					width: param.width, //画布宽度
					height: param.height, //画布高度
					pics: param.pics || [], //图片资源
					texts: param.texts || [], //文本
					paths: param.paths || {}, //路径
					self: self, //当前组件实例
					bgColor: param.bgColor,
					fileType: param.fileType || "jpg",
					quality: param.quality || 1,
					// // 也可以是：传参回调的方式，返回结果
					// callback:function(err, res){
					// }
				}).then((err, res) => {
					console.log("合成结果:", err, res);
					if (err) {
						var ev = {
							tips: '合成海报出错了!',
							err: err
						}
						self.$emit('fail', ev);
						return;
					}
					var ev = {
						tips: '海报合成成功!',
						res: res
					}
					self.$emit('success', ev);
				});
				//end 合成
			}, 250);
		}
	}
</script>

<style scoped>
	.myCanvas {
		position: fixed;
		left: 100%;
		top: 100%;
		z-index: -3;
		transform: translateX(200%);
		-webkit-transform: translateX(200%);
	}
</style>